<script setup>
//******************************************************************************************* */
// vue3 script-setup 语法糖 父子组件通信 使用defineEmit,defineProps,defineExpose (useContext 弃用)
//******************************************************************************************* */

//1. 直接导入组件
import simon from "comps/Simon.vue";
import { ref } from "vue";

// 2. 属性定义
const props = defineProps({
  msg: String,
});
// console.log(props);

// defineProps({
//   msg: String,
// });

//3. 获取上下文
// const ctx = useContext()
// console.log(ctx)

//4. 定义事件
const emit = defineEmits(["myclick"]);
//emit("myclick")

const onClick = () => {
  emit("myclick");
  //ctx.emit("myclick")
};

const count = ref(0);

fetch("/api/getUsers")
  .then((res) => res.json())
  .then((data) => {
    console.log(data.users[0]); // 输出simon
  });
</script>

<template>
  <h1>{{ msg }}</h1>
  <h3 @click="$store.commit('add')" title="点击计数器">
    计数器：{{ $store.state.couter }}
  </h3>
  <p>
    Recommended IDE setup:
    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
    +
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
  </p>

  <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">
      Vite Documentation
    </a>
    |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <button type="button" @click="count++">count is: {{ count }}</button>
  <!-- <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p> -->
  <button @click="onClick">emit</button>
  <simon msg="朱小明测试" />
</template>
<!--
<style scoped>
a {
  color: #42b983;
}
</style>
-->